<template>
  <!-- 说明书 -->
  <div class="instructions-page">
    <iframe v-if="showIframe" src="./static/xslt/index_spec.html" frameborder="0" id="xslt" width="100%" height="0"></iframe>
    <!-- <vue-scroll :ops="scrollOps"> -->
      <span id="boxContentInstructions" v-html="txt"></span>
      <div v-if="txt == ''" style="margin:0 auto;text-align:center;color:#ccc;font-size: 14px;">该专利无说明书</div> 
    <!-- </vue-scroll> -->
    <p v-if="txt===''" class="empty-text">
      <loading1 emptyText='加载中...'/>
    </p>
  </div>
</template>

<script>
import {escapeChar} from '@/utils/utils'
export default {
  props: {
    publicInfo: {
      type: Object
    },
    trans: {
      type: String
    },
    btnActive: {
      type: Number
    }
  },
  data() {
    return {
      showIframe: false,
      txt: '',
      yiwentxt: '',
      scrollOps: {},
      emptyText: '数据加载中...',
      isChina:true,
    }
  },
  watch: {
    btnActive() {
      if (this.btnActive === 2 && this.txt === '') {
        this.handleTrans()
      }
    },
    trans() {
      this.handleTrans()
    }
  },
  methods: {
    // 判断是否为中文
    isChinese(str) {
      // var regEx = "[\u4e00-\u9fa5]";
      // let flg = false;
      // if (str.match(regEx)) flg = true;
      // return flg;
      return /[\u4E00-\u9FA5]+/g.test(str);
    },
    handleTrans(){
      let id = this.$route.query.id
      //按钮是译文： 即翻译为中文
      if (this.trans === 'yiwen') {
        if (this.publicInfo["lang"] != "ZH") {
          if (this.publicInfo["lang"] != "EN") {
            this.txt = this.publicInfo['spec_zh'] || "--"
          } else {
            this.txt = this.publicInfo['spec_en'] || "--"
          }
        } else {
          this.txt = this.publicInfo['spec_en'] || "--"
        }
        console.log(777, this.txt)
        // //判断原文是否为中文 
        //   this.isChina = this.isChinese(this.publicInfo['spec']);
        // //是 --  翻译为英文显示
        // if(this.isChina) {
        //   // this.transalte('en', id, this.publicInfo['spec'])
        //   this.txt = this.publicInfo['spec_en']
        // }
        // //否 -- 取en字段 翻译为中文
        // else{
        //   this.txt = this.publicInfo['spec_zh']

        //   // this.transalte('zh', id, this.publicInfo['spec_en'])
        // }
      } 
      else if (this.trans === 'yuanwen') {
        this.txt = this.publicInfo['spec']?.replace(/\\n/g, '<br/>')
      }
    },
    // 翻译
    transalte(sto, pn, text) {
      this.txt = ''
      if (this.yiwentxt !== '') {
        this.txt = this.yiwentxt
        return
      }
      let newText = escapeChar(text)
      this.$post(this.$Url.consultModule.translat, {
        text: newText,
      }).then(res => {
        let data = res.data
        if (data) {
          this.yiwentxt = ''
          this.noTranslateData = false;
          let list =
          res.data.translation[0].translated[0]["translation list"];
          for (let i = 0; i < list.length; i++) {
            if(Array.isArray(list[i]) && list[i].length > 1){
              list[i].map( item => {
                if(item){
                  this.yiwentxt += "<p>" + item + "</p>";
                }
              })
            }else{
              if(list[i][0]){
                this.yiwentxt += "<p>" + list[i][0] + "</p>";
              }
            }
          }
          this.txt = this.yiwentxt
        }
      }).catch(err => {})
    },
  },
  beforeMount() {
    this.scrollOps = {
      vuescroll: {
        mode: 'native',
        sizeStrategy: 'number',
        detectResize: true,
        wheelScrollDuration: 200
      },
      scrollPanel: {
        initialScrollX: false,
        initialScrollY: false,
        scrollingX: false,
        scrollingY: true,
        speed: 1000,
      },
      rail: {
        size: '6px',
        // gutterOfEnds: '10px',
        gutterOfSide: '0px',
        keepShow: true,
      },
      bar: {
        onlyShowBarOnScroll: false,
        keepShow: true,
        background: '#adc2ca',
        size: '6px'
      },
    }
  },
  mounted() {
    // this.init()
  }
}
</script>

<style lang="scss" scoped>
.instructions-page {
  position: relative;
  p {
    line-height: 1.5;
    margin: 10px 0;
    text-indent: 2em;
    font-size: 14px;
    color: #000;
  }
}
#xslt {
  position: absolute;
}
#boxContentInstructions {
  display: inline-block;
  width: 80%;
  height: 100%;
  line-height: 2;
  // height: calc(100vh - 80px - 50px - 40px - 80px - 70px);
  padding: 20px 0 ;
  box-sizing: border-box;
  font-size: 14px;
  // min-height: 400px;
  white-space: pre-line;
  ::v-deep {
    p {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}
</style>